<template>
	<view class="page-body">
		<!-- <button  @click="beginCanvas">开始绘图</button> -->
		<image :src="canvasUrl" mode="widthFix"></image>
		<mosowe-canvas-image ref="mosoweCanvasComponents" @canvasImage="_canvasImage" :lists="canvasImg()" :height="pageHeight" :width="pageWidth" />
		<button class="butShare" @click="butShareFun">立即分享到朋友圈</button>
		<!-- showPreview -->
	</view>
</template>

<script>
//https://ext.dcloud.net.cn/plugin?id=2434  插件地址
import { getUnlimitedCode, queryUserAllInfo } from '@/service/api/api.js';
import mosoweCanvasImage from '@/components/mosoweCanvasImage/mosoweCanvasImage.vue';
export default {
	components: {
		mosoweCanvasImage
	},
	data() {
		return {
			canvasUrl: '',
			lists: [],
			pageHeight: '',
			pageWidth: '',
			UserAllInfo: {},
			qrImage:''
		};
	},

	onLoad(option) {
		try {
			this.userInfo = uni.getStorageSync('user_info');
		} catch (e) {
			console.log(e);
		}
		this.editItem = JSON.parse(decodeURIComponent(option.editItem));
		console.log(this.editItem, 'this.editItemthis.editItemthis.editItemthis.editItem');
	},
	created() {
		// this.canvasImg()
		this.queryUserAllInfoFun();
	},
	mounted() {

	},
	methods: {
		//开始绘制
		beginCanvas() {
			this.$refs.mosoweCanvasComponents.createCanvas();
		},
		//绘制完成的图片
		_canvasImage(e) {
			this.canvasUrl = e;
			// console.log(this.canvasUrl,'')
		},

		//绘制的json 数据
		canvasImg() {
			uni.getSystemInfo({
				success: res => {
					// res - 各种参数
					this.pageHeight = res.windowHeight - 61;
					this.pageWidth = res.windowWidth;
					console.log(res, '--------------手机信息');
				}
			});
			// console.log(this.editItem.detailImg1)

			// console.log(this.pageHeight, this.pageWidth);
			let fffbj =this.pageHeight>=700? 250 : 210; //白色背景高度
			let imghei =this.pageHeight>=700? 50 : 0; //
			let bhei =this.pageHeight>=700? 0 : 30; //
			let t1hei =this.pageHeight>=700? 20 : 0; //
			let t2hei =this.pageHeight>=700? 60 : 20; //
			let tit1hei =this.pageHeight>=700? 30 : 12; //
			let tit2hei =this.pageHeight>=700? 70 : 32; //
			let tit3hei =this.pageHeight>=700? 110 : 80; //
			let tit4hei =this.pageHeight>=700? 80 : 50; //
			let tit5hei =this.pageHeight>=700? 50 : 20; //
			
			
			
			let fffw = this.pageWidth - this.pageWidth * 0.1;
			let sps = this.pageHeight / this.pageWidth; // 屏幕像素比

			let srts = this.editItem.activityName;
			let title1 = srts.substring(0, 14);
			let title2 = srts.substring(14, srts.length);
			
			
			let title3=''
			let title4=''
			let title5=''
			if(this.editItem.textContent){
				let srts1=this.editItem.textContent
				title3 = srts1.substring(0, 16);
				title4 = srts1.substring(16, 32);
				title5 = srts1.substring(32, 38);
				if(title5){
					title5+='...'
				}

			}
			
			console.log(this.pageHeight - (this.pageHeight - 110) + this.pageHeight - fffbj * sps - 130 + (this.pageHeight - fffbj * sps) / 2.5 + 20,'-------sps')
             let userAvatar = this.UserAllInfo['userAvatar'] || '../../../static/images/user_avatar.png'
			return (this.lists = [
				{
					type: 'rect',
					width: this.pageWidth,
					height: this.pageHeight - 130,
					x: 0,
					y: 0,
					color: '#4995F7'
				},
				{
					type: 'rect',
					width: this.pageWidth - this.pageWidth * 0.1,
					height: this.pageHeight - fffbj-bhei,
					x: this.pageWidth - (this.pageWidth - (this.pageWidth * 0.1) / 2),
					y: this.pageHeight - (this.pageHeight - 100),
					// y: 20,
					arcR: 20,
					color: '#ffffff'
				},
				{
					type: 'image',
					content: this.editItem.detailImg1,
					// content:'https://dssp-pcm.oss-cn-beijing.aliyuncs.com/1617104402860.jpg',
					width: this.pageWidth - this.pageWidth * 0.22,
					height: (this.pageHeight - fffbj * sps) / sps+imghei,
					x: this.pageWidth - (this.pageWidth - (this.pageWidth * 0.22) / 2),
					y: this.pageHeight - (this.pageHeight - 110),
					arc: false,
					arcX: 0,
					arcY: 0,
					arcR: 50
				},
				{
					type: 'rect',
					width: this.pageWidth - this.pageWidth * 0.22,
					height: (this.pageHeight - fffbj * sps) / 2.5,
					x: this.pageWidth - (this.pageWidth - (this.pageWidth * 0.22111) / 2),
					y: (this.pageHeight - fffbj * sps),
					arcR: 20,
					color: '#F7F7F7'
				},
				{
					type: 'image',
					content: '../../../static/images/address_icon.png',
					width: 12,
					height: 12,
					x: this.pageWidth - (this.pageWidth - (this.pageWidth * 0.22) / 2) + 20,
					y: this.pageHeight - (this.pageHeight - 130) + this.pageHeight - fffbj * sps - 100 + (this.pageHeight - fffbj * sps) / 2.5 + t1hei,
					arc: false,
					arcX: 0,
					arcY: 0,
					arcR: 50
				},
				{
					type: 'image',
					content: '../../../static/images/time_icon.png',
					width: 12,
					height: 12,
					x: this.pageWidth - (this.pageWidth - (this.pageWidth * 0.22) / 2) + 20,
					y: this.pageHeight - (this.pageHeight - 130) + this.pageHeight - fffbj * sps - 100 + (this.pageHeight - fffbj * sps) / 2.5 + t2hei,
					arc: false,
					arcX: 0,
					arcY: 0,
					arcR: 50
				},
				{
					type: 'text',
					content: title1,
					x: 20,
					y: 40,
					color: '#ffffff',
					size: 24
					// maxWidth: 100,
					// align: 'left',
				},
				{
					type: 'text',
					content: title2,
					x: 20,
					y: 80,
					color: '#ffffff',
					size: 24
					// maxWidth: 100,
					// align: 'left',
				},
				{
					type: 'text',
					content: this.editItem.place || '',
					x: 90,
					y: this.pageHeight - (this.pageHeight - 130) + this.pageHeight - fffbj * sps - 100 + (this.pageHeight - fffbj * sps) / 2.5 + tit1hei,
					color: '#43425D',
					size: 14
					// maxWidth: 100,
					// align: 'left',
				},
				{
					type: 'text',
					content: this.editItem.time,
					x: 90,
					y: this.pageHeight - (this.pageHeight - 130) + this.pageHeight - fffbj * sps - 100 + (this.pageHeight - fffbj * sps) / 2.5 + tit2hei,
					color: '#43425D',
					size: 14
					// maxWidth: 100,
					// align: 'left',
				},
				// //活动内容
				{
					type: 'text',
					content: title3,
					x: 60,
					y: this.pageHeight - (this.pageHeight - 110) + this.pageHeight - fffbj * sps - 100 + (this.pageHeight - fffbj * sps) / 2.5 - tit3hei,
					color: '#43425D',
					size: 16
					// maxWidth: 100,
					// align: 'left',
				},
				{
					type: 'text',
					content: title4,
					x: 60,
					y: this.pageHeight - (this.pageHeight - 110) + this.pageHeight - fffbj * sps - 100 + (this.pageHeight - fffbj * sps) / 2.5 - tit4hei,
					color: '#43425D',
					size: 16
					// maxWidth: 100,
					// align: 'left',
				},
				{
					type: 'text',
					content: title5,
					x: 60,
					y: this.pageHeight - (this.pageHeight - 110) + this.pageHeight - fffbj * sps - 100 + (this.pageHeight - fffbj * sps) / 2.5 - tit5hei,
					color: '#43425D',
					size: 16
					// maxWidth: 100,
					// align: 'left',
				},

				// //活动角色信息
				{
					type: 'image',
					content:userAvatar,
					width: 76,
					height: 76,
					x: this.pageWidth - (this.pageWidth - (this.pageWidth * 0.22) / 2) - 25,
					y: this.pageHeight - 110,
					arc: false,
					arcX: 0,
					arcY: 0,
					arcR: 50
				},
				{
					type: 'text',
					content: this.UserAllInfo['userName'],
					x: this.pageWidth - (this.pageWidth - (this.pageWidth * 0.22) / 2) + 64,
					y: this.pageHeight - 90,
					color: '#43425D',
					size: 16,
					maxWidth: 200,
					align: 'left',
				},
				{
					type: 'text',
					content: this.UserAllInfo['userPhone'],
					x: this.pageWidth - (this.pageWidth - (this.pageWidth * 0.22) / 2) + 64,
					y: this.pageHeight - 70,
					color: '#43425D',
					size: 14,
					maxWidth: 200,
					align: 'left',
				},
				{
					type: 'text',
					content: this.UserAllInfo['userPost'],
					x: this.pageWidth - (this.pageWidth - (this.pageWidth * 0.22) / 2) + 64,
					y: this.pageHeight - 50,
					color: '#43425D',
					size: 14,
					maxWidth: 200,
					align: 'left',
				},
				{
					type: 'text',
					content: this.UserAllInfo['tenantName'],
					x: this.pageWidth - (this.pageWidth - (this.pageWidth * 0.22) / 2) + 64,
					y: this.pageHeight - 30,
					color: '#43425D',
					size: 14,
					// maxWidth: 200,
					// align: 'left',
				},
				// // 二维码
				// {
				// 	type: 'image',
				// 	// content: this.qrImage,
				// 	content: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201809%2F22%2F20180922110750_tbctd.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621930778&t=94721ffb559368b97f1d4ff96c1e5a9c',
				// 	width: 90,
				// 	height: 90,
				// 	x: this.pageWidth - 100,
				// 	y: this.pageHeight - 120,
				// 	arc: false,
				// 	arcX: 0,
				// 	arcY: 0,
				// 	arcR: 50
				// },
				{
					type: 'text',
					content: '立即扫码 参与活动',
					x: this.pageWidth - 95,
					y: this.pageHeight - 17,
					color: '#7B7A8D',
					size: 10,
					// maxWidth: 200,
					// align: '',
				},
				//图片文字描述
				{
					type: 'text',
					content: '4S店活动图',
					x: 65,
					y: 140,
					color: '#FFFFFF',
					size: 20,
					// maxWidth: 200,
					// align: '',
				},
				{
					type: 'text',
					content: '品牌特惠',
					x: 65,
					y: 180,
					color: '#FFFFFF',
					size: 20,
					// maxWidth: 200,
					// align: '',
				},
				{
					type: 'text',
					content: '试驾购车缤纷礼遇',
					x: 65,
					y: 210,
					color: '#FFFFFF',
					size: 16,
					// maxWidth: 200,
					// align: '',
				},
			]);
		},
		//分享到朋友圈
		butShareFun() {
			uni.share({
			    provider: "weixin",
			    scene: "WXSenceTimeline",
			    type: 2,
			    imageUrl: this.canvasUrl,
			    success: function (res) {
			        console.log("success:" + JSON.stringify(res));
			    },
			    fail: function (err) {
			        console.log("fail:" + JSON.stringify(err));
			    }
			});
		},
		//获取二维码
		async get_qrImage() {
			// pages/home/adviser/index

			let scene = `1,${this.userInfo.role},${this.userInfo.userId},${this.activityId}`;
			console.log(`pages/main/sharePage/index?scene=${scene}`);
			let res = await getUnlimitedCode({
				path: 'pages/main/sharePage/index',
				scene
			});
			if (res.data.code == '0') {
				console.log(res.data.data);
				this.qrImage = res.data.data;

			}
			// console.log(this.qrImage,'--------二维码');
		},
		//获取活动 角色信息
		async queryUserAllInfoFun() {
			let res = await queryUserAllInfo({ userId: this.userInfo.userId });

			if (res.data.code == 0) {
				// ? this.qrImage.userAvatar : '../../../static/images/user_avatar.png'
				this.UserAllInfo = res.data.data;
				// this.UserAllInfo['userAvatar'] = this.UserAllInfo['userAvatar'] || '../../../static/images/user_avatar.png';
				
				let userPost=''
				this.UserAllInfo['ucRoleUsers'].forEach(v=>{
					userPost+=v.roleName+'/'
				})
				this.UserAllInfo['userPost'] =  userPost.substr(0,userPost.length-1);
				// console.log(res,'--------res获取活动 角色信息')
				let scene = `1,${this.userInfo.role},${this.userInfo.userId},${this.activityId}`;
				console.log(`pages/main/sharePage/index?scene=${scene}`);
				let res1 = await getUnlimitedCode({
					path: 'pages/main/sharePage/index',
					scene
				});
				if (res1.data.code == '0') {
					console.log(res1.data.data);
					this.qrImage = res1.data.data;
				
				}
				this.beginCanvas();
				

			}
		}
	}
};
</script>

<style scoped lang="scss">
.page-body {
	width: 100%;
	height: 1246rpx;
}
.butShare {
	width: 80%;
	margin: 0 auto;
	margin-bottom: 30rpx;
	height: 92rpx;
	line-height: 92rpx;
	background: #3b86ff;
	color: #ffffff;
	font-size: 32rpx;
	opacity: 1;
	border-radius: 100px;
}
</style>
